<template>
  <div style="display: flex">
    <div class="animationDiv" ref="animationDiv">
      <div ref="imgContainer" class="imgContainer">
        <div v-for="(item, index) in imgArray" :key="index">
          <img style="width: 200px; height: 200px" v-if="item.imgUrl" :src="item.imgUrl" alt="" />
          <video
            style="width: 200px; height: 200px"
            class="videoDiv"
            v-if="item.videoUrl"
            :src="item.videoUrl"
            controls
          ></video>
          <!--                    <img style="width: 200px;height: 200px" src="https://picsum.photos/300/300" />-->
        </div>
      </div>
      <!--            <a-button @click="test">addImg</a-button>-->
      <!--            <a-button @click="test2">延申动画</a-button>-->
      <!--            <a-button @click="test3">回缩动画</a-button>-->
      <!--        <video ref="video" :src="videoUrl" controls></video>-->
    </div>
    <a-button v-show="buttonName" style="height: 200px" @click="test2">延申</a-button>
    <a-button v-show="!buttonName" style="height: 200px" @click="test3">回缩</a-button>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: 'imageContainer',
  data() {
    return {
      videoUrl: 'testVideo.mp4',
      imgArray: [
        {
          imgUrl: 'https://picsum.photos/300/300',
          videoUrl: ''
        },
        {
          imgUrl: 'https://picsum.photos/200/200',
          videoUrl: ''
        },
        {
          imgUrl: 'https://picsum.photos/200/200',
          videoUrl: ''
        },

        {
          imgUrl: 'https://picsum.photos/200/200',
          videoUrl: ''
        }
      ],
      startWidth: 420,
      endWidth: 840,
      buttonName: true
    }
  },

  methods: {
    test() {
      this.imgArray.unshift({
        imgUrl: 'https://picsum.photos/200/200',
        videoUrl: ''
      })
    },
    test2() {
      gsap.to('.animationDiv', {
        width: this.endWidth,
        duration: 1,
        ease: 'power1.inOut',
        onComplete: () => {
          this.buttonName = false
        }
      })
    },
    test3() {
      gsap.to('.animationDiv', {
        width: this.startWidth,
        duration: 1,
        ease: 'power1.inOut',
        onComplete: () => {
          this.buttonName = true
        }
      })
    }
  }
}
</script>

<style scoped>
:root {
  --start-with: 420px;
  --end-with: 800px;
}

.imgContainer {
  display: flex;
  gap: 10px;
  /*background-color: #0af3e8;*/
}

.videoDiv {
  /*max-width: 100%;*/
  /*max-height: 100%;*/
}

.animationDiv {
  width: 420px;
  height: 500px;
  overflow: hidden;
}
</style>
